<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/jquery-1.10.1.js"></script>
		<script src="../../js/echarts.common.min.js"></script>
		<script type="text/javascript" src="../../js/GlobalSetting.js"></script>
		<!--<script type="text/javascript" src="../../js/Common/update.js" ></script>-->
		<link href="../../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/user.css" />
		<link rel="stylesheet" href="../../css/1px-hack.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		<script src="../../js/Common/AjaxHelper.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#doneList img {
				display: block;
				width: 25px;
				height: 25px;
			}
			
			.mui-card {
				margin: 10px 0;
				padding: 0 10px;
			}
			
			.mui-card-header {
				padding: 0px;
				box-shadow: none;
			}
			
			.mui-card-header p {
				color: #007AFF;
				border-left: 2px solid #007aff;
				padding-left: 10px;
				font-size: 1rem;
				font-weight: 700;
			}
		</style>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				var currentUser = EPMUserInfo.LoadEPMUserInfo();
				mui(".mui-scroll-wrapper").scroll({
					deceleration: 0.0005
				});
//				vue.BindEcharts(currentUser.Id);
//				vue.GetCurrUserInfoModel(currentUser.Id)  

			})
			var vue = new Vue({
				el: "#Refresh",
				data: {
					UserInfoModel:[],
					aaa:1234556
				},
				methods: {
					BindEcharts: function(id) {
						var that = this;
						AjaxHelper.ajaxRequest(ServiceGlobal.ServiceUrl + "HomeData/GetSegmentPayDT/", {
							"Id": id
						}, function(json) {
							if(json != null && json != "") {
								var data = eval("(" + json + ")");
								that.SetHistogram(data);
							}
							plus.nativeUI.closeWaiting();
						}, function(err) {
							plus.nativeUI.closeWaiting();
							mui.toast("统计" + MessageInfo.RequestError);
						});

					},
					SetHistogram: function(data) {
						var that = this;
						var myChart = echarts.init(document.getElementById('mainPic'));
						option = {
							tooltip: {
								trigger: 'axis',
								showDelay: 0,
								position: [10, 10],
								formatter: function(params) {
									if(!!params[0].value) {
										return params[0].name + ' <br/>' +
											'签约合同价：' + params[0].value + '<br/> ' +
											'已完成投资额：' + params[1].value + '<br/>' +
											'单位：元';
									} else {
										return '';
									}
								},
								axisPointer: {
									show: true,
									type: 'shadow',
									lineStyle: {
										type: 'dashed',
										width: 1
									}
								}
							},
							legend: {
								data: [{
										name: '签约合同价'
									},
									{
										name: '已完成投资额'
									}
								]
							},
							grid: {
								show: false,
								left: 20,
								right: 20,
								bottom: 4,
								top: 26,
								height: 'auto',
								containLabel: true
							},
							xAxis: [{
								type: 'category',
								axisLine: {
									onZero: true,
									lineStyle: {
										color: '#558de5',
										width: 1
									}
								},
								axisTick: {
									sohw: true,
									inside: true
								},
								data: data.code
							}],
							yAxis: [{
								axisLine: {
									onZero: true,
									lineStyle: {
										color: '#558de5',
										width: 1
									}
								},
								axisTick: {
									show: true,
									inside: true
								},
								axisLabel: {
									show: false,
									inside: true
								},
								splitLine: {
									show: false
								},
								min: 'dataMin',
								type: 'value'
							}],
							backgroundColor: '#2a71de',
							series: [{
								name: '签约合同价',
								type: 'bar',
								barWidth: '50%',
								barMaxWidth: 32,
								barMinHeight: 20,
								barGap: '-100%',
								itemStyle: {
									normal: {
										barBorderRadius: 4,
										color: '#558de5'
									},
									emphasis: {
										color: '#aac6f2'
									}
								},
								stack: '签约合同价',
								data: that.changeArr(data.htVal)
							}, {
								name: '已完成投资额',
								type: 'bar',
								barWidth: '50%',
								barMaxWidth: 32,
								barMinHeight: 20,
								barGap: '-100%',
								itemStyle: {
									normal: {
										barBorderRadius: 4,
										color: '#ee7e32'
									},
									emphasis: {
										color: '#ffc58e'
									}
								},
								stack: '已完成投资额',
								data: that.changeArr(data.jlVal)
							}]
						};
						myChart.setOption(option);

					},
					changeArr: function(arr) {
						var newArr = []
						for(var i = 0; i < arr.length; i++) {
							if(arr[i] == 0) {
								newArr[i] = "";
							} else {
								newArr[i] = arr[i];
							}
						}
						return newArr
					},
					//上面是加载echart方法，
					//下面获取权限菜单
					GetCurrUserInfoModel: function(id) {
						var that = this;
						AjaxHelper.ajaxRequest(ServiceGlobal.ServiceUrl + "HomeData/GetCurrUserInfoModel/", {
							"Id": id
						}, function(json) {
							that.UserInfoModel = json

						}, function(json) {
							plus.nativeUI.closeWaiting();
							mui.toast("菜单模块" + MessageInfo.RequestError);

						})

					}
				}
			})
		</script>
	</head>

	<body>
		<div id="vue">
			{{aaa}}
		</div>
	</body>
	<script src="../../js/Common/NetStatusListener.js" type="text/javascript" charset="utf-8"></script>

</html>